<template>
    <draggable
        class="list-group"
        :list="list1"
        @start="isDragging = true"
        @end="isDragging = false"
        itemKey="key"
        ghost-class="ghost"
        :force-fallback="true"
        chosen-class="chosenClass"
        animation="300"
    >
        <template #item="{ element }">
            <li class="list-group-item" :key="element.key">
                {{ element.name }}
            </li>
        </template>
    </draggable>
</template>

<script lang="js" setup>
import { reactive, ref } from "vue";
import draggable from 'vuedraggable';

const isDragging = ref(false)

const list1 = reactive([
      {name: "JavaScript", nodeId: "name1", key: '1'},
      {name: "react", nodeId: "name2", key: '2'},
      {name: "CSS", nodeId: "name3", key: '3'},
      {name: "vue", nodeId: "name4", key: '4'},
      {name: "vite", nodeId: "name5", key: '5'},
      {name: "scss", nodeId: "name6", key: '6'}
  ]);
</script>

<style lang="scss">
.ghost {
    opacity: 0.5;
    background: #10AC84 !important;
    border: solid 1px rgb(19, 41, 239) !important;
}
.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
    border: 1px solid #ef631e;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 12px;
}
.chosenClass {
    background-color: #c8ebfb !important;
    border: none;
}
</style>
